<template>
    <div style="width: 100%;text-align: right;margin-bottom: 10px;">
        <ElButton type="primary" @click="addSkObj">添加</ElButton>
    </div>
    <ElTable class="list-table is-border" :="$attrs" border :data="list">
        <ElTableColumn label="收款类型">
            <template #default="{ row, $index }">
                <ElFormItem :prop="`skList.${$index}.sklxVal`" :rules="rules.sklxVal">
                    <ElSelect v-model="row.sklxVal" clearable>
                        <ElOption v-for="item in sklx" :key="item.val" :label="item.name" :value="item.val" />
                    </ElSelect>
                </ElFormItem>
            </template>
        </ElTableColumn>
        <ElTableColumn label="收款金额">
            <template #default="{ row, $index }">
                <ElFormItem :prop="`skList.${$index}.skje`" :rules="rules.skje">
                    <ElInput v-model="row.skje"></ElInput>
                </ElFormItem>
            </template>
        </ElTableColumn>
        <ElTableColumn label="收款状态">
            <template #default="{ row, $index }">
                <ElFormItem :prop="`skList.${$index}.skztVal`" :rules="rules.skztVal">
                    <ElSelect v-model="row.skztVal" clearable>
                        <ElOption v-for="item in skzt" :key="item.val" :label="item.name" :value="item.val" />
                    </ElSelect>
                </ElFormItem>
            </template>
        </ElTableColumn>
        <ElTableColumn label="收款时间">
            <template #default="{ row, $index }">
                <ElFormItem :prop="`skList.${$index}.sksj`" :rules="rules.sksj">
                    <ElDatePicker v-model="row.sksj" format="YYYY-MM-DD" valueFormat="YYYY-MM-DD" clearable />
                </ElFormItem>
            </template>
        </ElTableColumn>
        <ElTableColumn label="收款渠道">
            <template #default="{ row, $index }">
                <ElFormItem :prop="`skList.${$index}.skqdVal`" :rules="rules.skqdVal">
                    <ElSelect v-model="row.skqdVal" clearable>
                        <ElOption v-for="item in skqd" :key="item.val" :label="item.name" :value="item.val" />
                    </ElSelect>
                </ElFormItem>
            </template>
        </ElTableColumn>
        <ElTableColumn label="是否开票">
            <template #default="{ row, $index }">
                <ElFormItem :prop="`skList.${$index}.sfkpVal`" :rules="rules.sfkpVal">
                    <ElSelect v-model="row.sfkpVal" clearable>
                        <ElOption v-for="item in sfkp" :key="item.val" :label="item.name" :value="item.val" />
                    </ElSelect>
                </ElFormItem>
            </template>
        </ElTableColumn>
        <ElTableColumn label="客户发票">
            <template #default="{ row, $index }">
                <ElFormItem :prop="`skList.${$index}.fpId`" :rules="rules.fpId">
                    <ElInput v-model="row.fpId" :value="getGsmc(row.fpId)"
                        @click.native="handleInputClick(row, $index)">
                    </ElInput>
                </ElFormItem>
            </template>
        </ElTableColumn>
        <ElTableColumn label="开票状态">
            <template #default="{ row, $index }">
                <ElFormItem :prop="`skList.${$index}.kpztVal`" :rules="rules.kpztVal">
                    <ElSelect v-model="row.kpztVal" clearable>
                        <ElOption v-for="item in kpzt" :key="item.val" :label="item.gsmc" :value="item.val" />
                    </ElSelect>
                </ElFormItem>
            </template>
        </ElTableColumn>
        <ElTableColumn label="备注">
            <template #default="{ row }">
                <ElInput v-model="row.bz"></ElInput>
            </template>
        </ElTableColumn>
    </ElTable>

    <ElDialog v-model="dialogVisible" title="选择发票" width="90%">
        <div>
            <ElTable :data="fpList" border style="padding: 20px;">
                <ElTableColumn prop="fplxName" label="发票类型" width="100"></ElTableColumn>
                <ElTableColumn prop="pmsdName" width="100" label="票免税点"></ElTableColumn>
                <ElTableColumn prop="gsmc" label="公司名称" width="350"></ElTableColumn>
                <ElTableColumn prop="khyh" label="开户银行" width="400"></ElTableColumn>
                <ElTableColumn prop="tyshxydm" label="统一社会信用代码" width="300"></ElTableColumn>
                <ElTableColumn prop="yhzh" label="银行账号" width="280"></ElTableColumn>
                <ElTableColumn label="操作" width="150">
                    <template #default="{ row }">
                        <ElButton type="primary" link @click="selectFp(row)">选择</ElButton>
                    </template>
                </ElTableColumn>
            </ElTable>
        </div>
    </ElDialog>

</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { ElInput, ElSelect, ElTableColumn, ElDatePicker, ElFormItem, ElDialog } from 'element-plus'
import { getDictInfo, getFpListByCustomerId } from '../api';

interface Props {
    data: any;
}

const props = withDefaults(defineProps<Props>(), {
    data: () => ({})
})

const dialogVisible = ref(false);

// 定义校验规则（完全在子组件内部管理）
const rules = {
    skje: { required: true, message: '请输入收款金额', trigger: ['blur', 'change'] },
    sklxVal: { required: true, message: '请选择收款类型', trigger: ['blur', 'change'] },
    skztVal: { required: true, message: '请选择收款状态', trigger: ['blur', 'change'] },
    sksj: { required: true, message: '请选择收款时间', trigger: ['blur', 'change'] },
    skqdVal: { required: true, message: '请选择收款渠道', trigger: ['blur', 'change'] },
    sfkpVal: { required: true, message: '请选择是否开票', trigger: ['blur', 'change'] },
    fpId: { required: true, message: '请选择客户发票', trigger: ['blur', 'change'] },
    kpztVal: { required: true, message: '请选择开票状态', trigger: ['blur', 'change'] },
};

let list = computed(() => {
    return props.data.skList;
})

let sklx = ref([]);
let skzt = ref([]);
let skqd = ref([]);
let sfkp = ref([]);
let kpzt = ref([]);
let fpList = ref([]);
let customerId = ref();

onMounted(async () => {
    sklx.value = await getDictInfo("sklx");
    skzt.value = await getDictInfo("skzt");
    skqd.value = await getDictInfo("skqd");
    sfkp.value = await getDictInfo("sfkp");
    kpzt.value = await getDictInfo("kpzt");
    customerId.value = props.data.customerId;
    fpList.value = await getFpListByCustomerId({ customerId: customerId.value });
    console.log(fpList.value);
    console.log(fpList.value);
})

const addSkObj = () => {
    list.value.push({
        'kpztVal': '未开票',
        'sfkpVal': props.data.sfkpVal
    });
}

let selectIndex = ref();

const handleInputClick = async (row, index) => {
    // 弹出模态框
    dialogVisible.value = true;
    selectIndex.value = index;
}

const selectFp = async (row) => {
    list.value[selectIndex.value].fpId = row.id;
    dialogVisible.value = false;
}

const getGsmc = (id) => {
    if (!id) return '';
    const fp = fpList.value.find(item => item.id === id);
    return fp ? fp.gsmc : '';
}

</script>

<style scoped lang="scss"></style>